<script setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
//   const handleOpen = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
//   }
//   const handleClose = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
//   }

const dialogVisible = ref(false)
function  open () {
    console.log('open')
  dialogVisible.value = true;
}


</script>

<template>
    <div id="chatInterface_setup">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      
     style="height:100vh; width: 3.9vw;">

      <el-menu-item index="1">
        <el-icon @click="open()"><icon-menu /></el-icon>
        <template #title>Navigator one</template>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <template #title>Navigator Two</template>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon><document /></el-icon>
        <template #title>Navigator Three</template>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>Navigator Four</template>
      </el-menu-item>
    </el-menu>

    <!-- <el-diglog isVisible.sync="dialogVisible" title="创建群聊" width="50%">
      </el-diglog>
      <div  class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div> -->
</div>

  </template>
  
  
  <style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  </style>
  